{% extends 'base/base.html' %}
{% load static %}
{% load math_filters %}  <!-- 这行必须放在模板顶部附近 -->

{% block title %}妙趣拾光锦盒 - 超市盲盒平台{% endblock %}

{% block extra_css %}
<style>
    /* 添加CSS动画 */
    .count-up-animation {
        animation: pulse 0.5s ease-in-out;
        color: #ff6b6b; /* 数字变化时高亮颜色 */
    }
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

    /* 首页专用样式 */
    .hero-section {
        //background: linear-gradient(135deg, #d6b7ff, #ffcfe0);
        background: #b6c3fc; /* 使用渐变色中的第一个颜色 */
        //min-height: 500px;
        //padding: 10px 0 10px;
        margin-bottom: 0;
    }
    
    .hero-title {
        font-size: 3rem;
        font-weight: 800;
        color: #333;
        text-shadow: 2px 2px 4px rgba(255,255,255,0.5);
        margin-bottom: 20px;
    }
    
    .hero-subtitle {
        font-size: 1.5rem;
        color: #333;
        margin-bottom: 30px;
        text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
    }
    
    .hero-buttons .btn {
        padding: 7px 15px;
        font-size: 0.7rem;
        font-weight: 600;
        margin-right: 15px;
        //border-radius: 30px;
        box-shadow: 0 4px 15px rgba(163, 112, 247, 0.2);
    }
    
    .hero-image {
        max-width: 50%;
        height: 150px;
        //transform: rotate(-5deg);
        //animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
        0% { transform: translatey(0) rotate(-5deg); }
        50% { transform: translatey(-20px) rotate(-5deg); }
        100% { transform: translatey(0) rotate(-5deg); }
    }
    
    .feature-icon {
        font-size: 2.5rem;
        color: #a370f7;
        margin-bottom: 20px;
    }
    
    .feature-card {
        transition: transform 0.3s, box-shadow 0.3s;
        border-radius: 15px;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 0.9);
    }
    
    .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(163, 112, 247, 0.2);
    }
    
    .box-card {
        border-radius: 15px;
        overflow: hidden;
        transition: transform 0.3s, box-shadow 0.3s;
        background-color: white;
    }
    
    .box-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(163, 112, 247, 0.2);
    }
    
    .box-image-container {
        overflow: hidden;
        position: relative;
    }
    
    .box-image {
        transition: transform 0.5s;
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .box-card:hover .box-image {
        transform: scale(1.05);
    }
    
    .badge-discount {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 8px 10px;
        font-weight: 700;
        font-size: 0.8rem;
        z-index: 2;
        background: linear-gradient(135deg, #a370f7, #ff6b8b);
    }
    
    .market-card {
        border-radius: 15px;
        overflow: hidden;
        transition: all 0.3s;
        background-color: white;
    }
    
    .market-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(163, 112, 247, 0.2);
    }
    
    .section-title {
        position: relative;
        padding-bottom: 15px;
        margin-bottom: 10px;
    }
    
    .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 4px;
        background: linear-gradient(135deg, #a370f7, #ff9fc6);
        border-radius: 2px;
    }
    
    .swiper-container {
        padding: 10px 0 0px;
    }
    
    .swiper-pagination-bullet-active {
        background-color: #a370f7;
    }
    
    .bg-light {
        //background-color: transparent !important;
    }
    
    .promo-section {
        background: linear-gradient(135deg, #a370f7, #ff9fc6) !important;
    }
</style>
{% endblock %}

{% block content %}
<!-- 英雄区域 -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center g-1">  <!-- 添加 g-1 减少列间间隙 -->
            <!-- 左边图片 -->
<!--            <div class="col-lg-4 text-center">-->
<!--                <img src="{% static 'images/hero-image4.png' %}" alt="妙趣拾光锦盒" class="hero-image">-->
<!--            </div>-->
            <div class="col-lg-4 text-lg-end"> <!-- 大屏下文本/行内元素右对齐 -->
                <img src="{% static 'images/hero-image4.png' %}" class="hero-image d-inline-block"> <!-- 确保图片作为行内块元素 -->
            </div>

            <!-- 中间文字 -->
            <div class="col-lg-4 text-center">
                <h3 class="mb-0">找寻令你心动的盒子</h3>  <!-- mb-0 移除默认底部间距 -->
            </div>

            <!-- 右边按钮 -->
            <div class="col-lg-4">
                <div class="hero-buttons">
                    <a href="{% url 'blindbox:list' %}" class="btn btn-light">
                        去抢购
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 特色区域 -->
<!--<section class="features-section py-2">-->
<!--    <div class="container">-->
<!--        <div class="row">-->
<!--            <div class="col-md-3 mb-4">-->
<!--                <div class="card h-100 border-0 shadow-sm feature-card text-center p-4">-->
<!--                    <div class="card-body">-->
<!--                        <i class="fas fa-leaf feature-icon"></i>-->
<!--                        <h4 class="mb-3">节约先行</h4>-->
<!--                        <p class="text-muted">减少食物浪费，每一个食品盲盒都是对节约的贡献</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="col-md-3 mb-4">-->
<!--                <div class="card h-100 border-0 shadow-sm feature-card text-center p-4">-->
<!--                    <div class="card-body">-->
<!--                        <i class="fas fa-percent feature-icon"></i>-->
<!--                        <h4 class="mb-3">超值优惠</h4>-->
<!--                        <p class="text-muted">全部商品低于原价，平均节省30%以上</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="col-md-3 mb-4">-->
<!--                <div class="card h-100 border-0 shadow-sm feature-card text-center p-4">-->
<!--                    <div class="card-body">-->
<!--                        <i class="fas fa-box-open feature-icon"></i>-->
<!--                        <h4 class="mb-3">惊喜体验</h4>-->
<!--                        <p class="text-muted">每个盲盒都是独特的惊喜，享受开箱的乐趣</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="col-md-3 mb-4">-->
<!--                <div class="card h-100 border-0 shadow-sm feature-card text-center p-4">-->
<!--                    <div class="card-body">-->
<!--                        <i class="fas fa-medal feature-icon"></i>-->
<!--                        <h4 class="mb-3">品质保障</h4>-->
<!--                        <p class="text-muted">严选优质商品，确保每份惊喜都值得期待</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->

<!-- 推荐盲盒 -->
<section class="featured-boxes-section py-1 bg-light">
    <div class="container">
        {% if user.is_authenticated %}
        <h2 class="section-title">精选盲盒</h2>
        {% else %}
        <h5 class="section-title">猜你喜欢</h5>
<!--        <p class="text-muted mb-4">这里展示的是最受欢迎的盲盒，购买量最高的前4个盲盒</p>-->
        {% endif %}
        <div class="swiper-container featured-swiper">
            <div class="swiper-wrapper">
                {% for box in featured_boxes %}
                <div class="swiper-slide">
                    <div class="card border-0 shadow-sm box-card h-100">
                        <div class="box-image-container">
                            <img src="{{ box.image_url }}" alt="{{ box.name }}" class="box-image">
                            {% if box.discount_price and box.original_price and box.discount_price < box.original_price %}
                                <span class="badge bg-danger badge-discount">
                                    立省{{ box.discount_rate|saving_percent|floatformat:"0" }}%
                                </span>
                            {% endif %}
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">{{ box.name }}</h5>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <div>
                                    {% if box.discount_price %}
                                    <span class="text-danger fw-bold">¥{{ box.discount_price }}</span>
                                    <small class="text-muted text-decoration-line-through ms-2">¥{{ box.original_price }}</small>
                                    {% else %}
                                    <span class="text-danger fw-bold">¥{{ box.original_price }}</span>
                                    {% endif %}
                                </div>
                                <a href="{% url 'blindbox:detail' box_id=box.box_id %}" class="btn btn-sm btn-primary">
                                    <i class="fas fa-eye me-1"></i>查看
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="text-center py-5">
                    <p class="text-muted">暂无推荐盲盒</p>
                </div>
                {% endfor %}
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</section>

<!-- 合作超市 -->
<section class="markets-section py-1" >
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="section-title mb-0">金牌超市</h5>
            <a href="{% url 'market:list' %}" class="btn btn-outline-primary">
                查看全部 <i class="fas fa-arrow-right ms-1"></i>
            </a>
        </div>
        <div class="row">
            {% for market in popular_markets %}
            <div class="col-md-3 mb-4">
                <div class="card border-0 shadow-sm market-card h-100">
                    <img src="{{ market.image_url }}" alt="{{ market.name }}" class="card-img-top" style="height: 150px; object-fit: cover;">
                    <div class="card-body">
                        <h5 class="card-title">{{ market.name }}</h5>
                        <div class="d-flex mb-2">
                            {% for i in '12345'|make_list %}
                                {% if forloop.counter <= market.rating %}
                                <i class="fas fa-star text-warning"></i>
                                {% else %}
                                <i class="far fa-star text-warning"></i>
                                {% endif %}
                            {% endfor %}
                            <span class="ms-1 text-muted">({{ market.rating }})</span>
                        </div>
                        <p class="text-muted small mb-3">{{ market.address }}</p>
                        <a href="{% url 'market:detail' market_id=market.market_id %}" class="btn btn-sm btn-primary w-100">查看详情</a>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <p class="text-muted">暂无热门超市</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- 最新盲盒 -->
<section class="new-boxes-section py-5 bg-light">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="section-title mb-0">最新上架</h2>
            <a href="{% url 'blindbox:list' %}?sort=newest" class="btn btn-outline-primary">
                查看全部 <i class="fas fa-arrow-right ms-1"></i>
            </a>
        </div>
        <div class="row">
            {% for box in newest_boxes %}
            <div class="col-md-3 mb-4">
                <div class="card border-0 shadow-sm box-card h-100">
                    <div class="box-image-container">
                        <img src="{{ box.image_url }}" alt="{{ box.name }}" class="box-image">
                        {% if box.discount_price and box.original_price and box.discount_price < box.original_price %}
                        <span class="badge bg-danger badge-discount">
                            立省{{ box.discount_percentage }}%
                        </span>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">{{ box.name }}</h5>
                        <div class="d-flex justify-content-between align-items-center mt-2">
                            <div>
                                {% if box.discount_price %}
                                <span class="text-danger fw-bold">¥{{ box.discount_price }}</span>
                                <small class="text-muted text-decoration-line-through ms-2">¥{{ box.original_price }}</small>
                                {% else %}
                                <span class="text-danger fw-bold">¥{{ box.original_price }}</span>
                                {% endif %}
                            </div>
                            <a href="{% url 'blindbox:detail' box_id=box.box_id %}" class="btn btn-sm btn-primary">
                                <i class="fas fa-eye me-1"></i>查看
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <p class="text-muted">暂无最新盲盒</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- 热销盲盒 -->
<section class="hot-boxes-section py-5">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="section-title mb-0">热销爆款</h2>
            <a href="{% url 'blindbox:list' %}?sort=sales" class="btn btn-outline-primary">
                查看全部 <i class="fas fa-arrow-right ms-1"></i>
            </a>
        </div>
        <div class="row">
            {% for box in hot_boxes %}
            <div class="col-md-3 mb-4">
                <div class="card border-0 shadow-sm box-card h-100">
                    <div class="box-image-container">
                        <img src="{{ box.image_url }}" alt="{{ box.name }}" class="box-image">
                        {% if box.discount_price and box.original_price and box.discount_price < box.original_price %}
                        <span class="badge bg-danger badge-discount">
                            立省{{ box.discount_percentage }}%
                        </span>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">{{ box.name }}</h5>
                        <div class="d-flex justify-content-between align-items-center mt-2">
                            <div>
                                {% if box.discount_price %}
                                <span class="text-danger fw-bold">¥{{ box.discount_price }}</span>
                                <small class="text-muted text-decoration-line-through ms-2">¥{{ box.original_price }}</small>
                                {% else %}
                                <span class="text-danger fw-bold">¥{{ box.original_price }}</span>
                                {% endif %}
                            </div>
                            <a href="{% url 'blindbox:detail' box_id=box.box_id %}" class="btn btn-sm btn-primary">
                                <i class="fas fa-eye me-1"></i>查看
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <p class="text-muted">暂无热销盲盒</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- 推广区域 -->
<section class="promo-section py-5 bg-primary text-white">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mb-4 mb-lg-0">
                <h2 class="mb-3" style="font-size: 30px;">每打开一个盲盒都是妙趣拾光</h2>
                <p class="mb-4" style="font-size: 20px;">妙趣拾光，共赴生活的奇妙之旅</p>
                <div class="row">
                    <div class="col-md-4 mb-3 mb-md-0">
                        <div class="d-flex align-items-center">
                            <div class="fs-1 me-3">
                                <i class="fas fa-shopping-bag"></i>
                            </div>
                            <div>
                                <h4 class="mb-0" id="soldCount">100万+</h4>
                                <p class="mb-0">已售出盲盒</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3 mb-md-0">
                        <div class="d-flex align-items-center">
                            <div class="fs-1 me-3">
                                <i class="fas fa-store"></i>
                            </div>
                            <div>
                                <h4 class="mb-0">300+</h4>
                                <p class="mb-0">合作超市</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex align-items-center">
                            <div class="fs-1 me-3">
                                <i class="fas fa-leaf"></i>
                            </div>
                            <div>
                                <h4 class="mb-0">50000+</h4>
                                <p class="mb-0">帮助农户数量</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 text-center text-lg-end">
                <a href="{% url 'blindbox:list' %}" class="btn btn-light btn-lg">
                    <i class="fas fa-box-open me-2"></i>立即购买
                </a>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    let count = 1000000; //aaa，从数据库读数据

    function updateCount() {
        const countElement = document.getElementById('soldCount');
        //countElement.textContent = count.toString();
        fetch('/blindbox/get_sold_blind_box_count')
            .then(response => response.json())
            .then(data => {
                count = data.count;
                if(countElement.textContent=='100万+'){
                    countElement.textContent = count.toString();
                }
                if(count > countElement.textContent){
                    // 添加动画类
                    countElement.classList.add('count-up-animation');
                    // 格式化数字
                    countElement.textContent = count.toString();
                    //demo(); // 异步阻塞 100ms
                    // 动画结束后移除类
                    setTimeout(() => {
                        countElement.classList.remove('count-up-animation');
                    }, 500);
                    console.log('更新成功:', data);
                }
            })
            .catch(error => {
                console.error('获取数据失败:', error);
            })
    }
    setInterval(updateCount, 3000);

    //沉睡10ms
    const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

    // 用法（需在 async 函数中）
    async function demo() {
      console.log("开始");
      await sleep(100); // 等待 100ms
      console.log("100ms 后执行");
    }



    // 初始化推荐盲盒轮播
    document.addEventListener('DOMContentLoaded', function() {
        const featuredSwiper = new Swiper('.featured-swiper', {
            slidesPerView: 1,
            spaceBetween: 20,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            breakpoints: {
                640: {
                    slidesPerView: 2,
                },
                768: {
                    slidesPerView: 3,
                },
                1024: {
                    slidesPerView: 4,
                },
            }
        });
    });
</script>
{% endblock %} 